<template lang="html">
  <div id="system">
    <el-tabs v-model="activeName" stretch @tab-click="handleClick">
      <el-tab-pane label="数据备份" name="first">
        <el-input v-model="addInput" placeholder="请输入添加描述..."></el-input>
        <el-button type="primary" plain @click="handleAdd">添加备份</el-button>
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}" height="300">
          <el-table-column label="备份时间" prop="date">
          </el-table-column>
          <el-table-column label="操作人" prop="name">
          </el-table-column>
          <el-table-column label="备份描述" prop="des">
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @blur="handleSearch(scope.row)" />
            </template>
            <template slot-scope="scope">
              <el-button-group>
                <el-button size="mini" type="primary" v-if='use==scope.row.date' disabled>使用中</el-button>
                <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">恢复</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="second">
        <div style="margin:0 10px;">
          <el-input placeholder="请输入员工姓名..." v-model="input2">
            <template slot="append">
              <el-button type="primary" plain icon="el-icon-search" @click="find">搜索员工</el-button>
               <el-button type="danger" plain @click="reset">重置</el-button>
            </template>
          </el-input>
        </div>
        <el-timeline>
          <template v-for="(item,index) in journal">
            <el-timeline-item :key="index" :timestamp="item.date" placement="top" color="skyblue" v-if="journalExit.includes(item.name)">
              <el-card>
                <h4>员工姓名：{{item.name}}</h4>
                <p>在线时间：{{item.time+'    '}}   结账订单量：{{item.order+'    '}}   结账金额：{{item.count}}</p>
              </el-card>
            </el-timeline-item>
          </template>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: '',
  components: {

  },
  data() {
    return {
      addInput: '',
      activeName: 'first',
      input2: '',
      journalExit:['大喵','二狗子','小钢炮','二娃','西瓜皮'],
      operator: this.$store.state.userName || undefined,
      use: '2016-05-02',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        des: '食品周的数据存档'
      }, {
        date: '2016-05-04',
        name: '跳跳虎',
        des: '记最大一次供货量数据备份'
      }, {
        date: '2016-05-01',
        name: '王大虎',
        des: '一个很有必要的备份'
      }, {
        date: '2016-05-03',
        name: '小小虎',
        des: '没啥事，我就备个份'
      }],
      search: '',
      journal:[
      {name:"二狗子",time:6,order:10,count:456,date:'2019-10-24'},
      {name:"大喵",time:6,order:11,count:1204,date:'2019-8-20'},
      {name:"小钢炮",time:6,order:1,count:50,date:'2019-4-8'},
      {name:"二狗子",time:6,order:18,count:7894,date:'2019-7-02'},
      {name:"二娃",time:6,order:20,count:6589,date:'2019-9-14'},
      {name:"大喵",time:6,order:5,count:333,date:'2019-11-27'},
      {name:"二狗",time:6,order:10,count:789,date:'2019-12-24'},
      {name:"小钢炮",time:6,order:8,count:969,date:'2019-6-09'},
      {name:"西瓜皮",time:6,order:7,count:555,date:'2019-5-23'},
      ]
    }
  },
  methods: {
    handleClick(tab) {
      console.log(tab)
    },
    find() {
      if (this.input2) {
       this.journal.forEach(item=>{
        if (item.name==this.input2) return this.journalExit=item.name;
        })
       console.log(this.journalExit)
      }else {
        this.journalExit=['大喵','二狗子','小钢炮','二狗','西瓜皮']
      }
    },
    reset(){
      this.journalExit=['大喵','二狗子','小钢炮','二狗','西瓜皮']
    },
    formatDate(time) { //日期格式化字符串
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var day = time.getDate();
      month = (month < 10 ? "0" + month : month);
      day = (day < 10 ? "0" + day : day);
      return year + "-" + month + "-" + day;
    },
    handleAdd() { //添加
      if (this.addInput) {
        let addObj = {
          date: this.formatDate(new Date()),
          name: this.operator,
          des: this.addInput
        }
        this.$set(this.tableData, this.tableData.length, addObj)
        // this.use++
      } else {
        this.$message({
          type: 'danger',
          message: '不能为空!'
        })
      }

    },
    handleEdit(index, row) { //恢复
      this.use = row.date
    },
    handleDelete(index, row) {
      if (this.use == row.date) {
        this.$message({
          type: 'danger',
          message: '不能删除正在使用的数据!'
        })
      } else {
        this.tableData = this.tableData.filter(item => {
          return item.date != row.date
        })
      }
    },
    handleSearch(row) {
      console.log(row);
    }

  }
}

</script>


 <style scoped>

</style>